<template>
  <el-date-picker
    v-model="myDate"
    :id="'w' + props.formCtrlId"
    :name="'w' + props.formCtrlId"
    :size="props.size"
    :type="props.controlType"
    :format="formatDate(props.controlType)"
    :clearable="props.isClear"
    @change="myChange"
  ></el-date-picker>
</template>

<script lang="ts" setup>
import FormItemCtrl from "@/components/form/formItem/FormItemCtrl";
import { DateType } from "@/components/form/formItem/FormPropsEnum";
import { BaseFormItem } from "@/components/form/formItem/FormItemMeta";

export interface PickerDateProps extends BaseFormItem {
  modelValue: string | Date | null;
  formCtrlId?: number; // 控件id, 区分组件
  colName?: string; // 字段名称
  isClear?: boolean; // 连续添加是否需要清空该字段
  controlType?: string; // 控件类型
  size?: string; // 尺寸 medium / small / mini
  optionList?: Array<unknown>; // 备用选项
  validateEvent?: boolean; // 输入时是否触发表单的校验
}

const props = withDefaults(defineProps<PickerDateProps>(), {
  modelValue: "",
  formCtrlId: 10001,
  colName: "no",
  isClear: true,
  size: "default",
  controlType: DateType.DateTime,
  optionList: () => [],
  validateEvent: true,
});

// 格式化显示
const formatDate = (controlType: string) => {
  switch (controlType) {
    case "date":
      return "YYYY年MM月DD日";
    case "datetime":
      return "YYYY年MM月DD日 HH时mm分ss秒";
    case "month":
      return "YYYY 年 MM 月";
    case "week":
      return "YYYY 第 ww 周";
    case "year":
      return "YYYY 年";
  }
};

const emit = defineEmits(["update:modelValue", "myChange", "input", "change"]);

const { myDate, myChange, dateMange } = FormItemCtrl(props, emit);
dateMange();
</script>

<style scoped></style>
